<template>
    <div>
        <p>
            <a href="https://www.npmjs.com/package/@cycjimmy/jsmpeg-player">
                TS视频播放器jsmpeg-player

            </a>
        </p>
        <a-button @click="play()">play</a-button>
        <a-button @click="stop()">stop</a-button>
        <a-button @click="pause()">pause</a-button>
        <br>
        <canvas ref="tsRef" style="width: 600px;" id="videoWrapper"></canvas>
    </div>


</template>

<script>
    import JSMpeg from '@cycjimmy/jsmpeg-player';

    export default {

        data() {
            return {
                playUrl: "/lte/sec/getTsVideo",
                // playUrl: "https://www.nmgxwhz.com:65/20201121/1UwOkSqv/1200kb/hls/P8XDcyxz.ts",
                jsmPlayer: null
            }

        },
        methods: {
            play() {
                this.jsmPlayer.play();
                console.log(this.jsmPlayer)
            },
            pause() {
                this.jsmPlayer.pause();
                console.log(this.jsmPlayer)

            },
            stop() {
                this.jsmPlayer.stop();
                console.log(this.jsmPlayer)

            }
        },
        beforeDestroy() {
            this.jsmPlayer.destroy();
            this.jsmPlayer=undefined;
        },
        mounted() {
            let canvas = document.getElementById('videoWrapper');
            this.jsmPlayer = new JSMpeg.VideoElement(
                canvas,
                this.playUrl,
                {
                    canvas,
                    autoplay: false,
                    progressive: true,
                    control: true,
                    loop: 0,
                    preserveDrawingBuffer: true,
                    decodeFirstFrame: true,
                    disableGl: true,
                },
                {
                    audio: true, //静音

                    onPlay: () => {
                        console.warn('开始播放ts')

                    },
                    onPause: () => {
                        console.warn('暂停播放ts')

                    },

                }
            );
            console.log(this.jsmPlayer)
        }
    }
</script>

<style scoped>

</style>